/**
 * @file form
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  Component,
  PropTypes
} from 'react';
import {Renderer, render, filter} from '../renderer';
import * as cx from 'classnames';
import * as assign from 'object-assign';
import './basic-form';

@Renderer({
  name: 'panel-form',
  desc: '...',
  test: /(^|\/)panel-form$/
})
export default class PanelFormRender extends Component {
  static propTypes = {
    actions: PropTypes.arrayOf(PropTypes.object),
    className: PropTypes.string,
    loading: PropTypes.bool,
    submitText: PropTypes.string,
    onRequestAction: PropTypes.func
  };

  static defaultProps = {
    title: '表单',
    submitText: '提交',
    panelClassName: 'panel-default',
    bodyClassName: 'panel-body',
    actionsClassName: 'panel-footer',
    footerClassName: 'panel-footer'
  };

  renderActions() {
    let {
      $path,
      actions,
      submitText,
      locals,
      controls,
      loading,
      disabled,
      onRequestAction,
      mode,
      data
    } = this.props;

    if (actions && Array.isArray(actions) && actions.length) {
      return actions ? actions.map((action, index) => (
        render(`${$path}/action`, action, {
          key: index,
          disabled: action.disabled || loading || disabled,
          data: data,
          locals,
          onRequestAction
        })
      )) : null
    } else if (typeof actions === 'undefined' && submitText && mode !== 'inline' && controls
      && !controls.filter(control => control.type === 'submit' || control.type === 'button-toolbar').length) {
      actions = submitText;
    } else {
      return null;
    }

    if (typeof actions === 'string') {
      actions = {
        label: actions,
        primary: true
      };
    }

    actions.type = 'submit';
    return render(`${$path}/action`, actions, {
      key: 'actions',
      disabled: loading,
      onRequestAction
    });
  }

  renderFooter() {
    const actions = this.renderActions();
    const {
      loadingField
    } = this.props;

    const loadingFieldMap = {
      "fetching": "正在拉取数据中，请稍候...",
      "saving": "表单提交中，请稍后...",
      "schema.fetching": "拉取schema中，请稍后...",
      "waiting": "正在定时拉取数据中，请稍候..."
    };

    if (!actions) {return null}

    return [
      this.props.loading ? (
        <div key="info" className="pull-left">
          <i className="v-middle fa fa-spinner fa-spin fa-2x fa-fw" />
          <span>{loadingFieldMap[loadingField]}</span>
        </div>
      ) : null,
      actions
    ]
  }

  renderContainer(children, defaultProps) {
    const {
      $path,
      sendNotify,
      locals,
      location,
      data,
      onRequestAction,
      name
    } = this.props;

    if (!Array.isArray(children)) {
      children = [children];
    }

    return children.map((child, key) => render(`${$path}/${child.type}`, assign({}, defaultProps, child), {
      name: child.name || `${name}-${child.type}`,
      key,
      sendNotify,
      locals,
      data,
      location,
      onRequestAction
    }));
  }

  render() {
    const {
      panelClassName,
      title,
      bodyClassName,
      actionsClassName,
      footerClassName,
      footer,
      $path,
      data,
      $key
    } = this.props;

    const footerChild = this.renderFooter();
    return (
      <div
        className={cx('panel panel-form', panelClassName)}
      >
        {title ? (
          <div className="panel-heading"><h3 className="panel-title">{filter(title, data)}</h3></div>
        ) : null}
        <div className={bodyClassName}>
          {render(`${$path}/basic-form`, this.props, {}, $key)}
        </div>
        {footerChild ? (
          <div className={actionsClassName}>{footerChild}</div>
        ) : null}

        {footer && (
          <div className={footerClassName}>
            {this.renderContainer(footer)}
          </div>
        )}
      </div>
    );
  }
}
